<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成图标</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .icon-container {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin: 20px 0;
        }
        .icon-item {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            text-align: center;
        }
        canvas {
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        button:hover {
            background: #0056b3;
        }
        .instructions {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .qr-icon {
            fill: #007bff;
        }
    </style>
</head>
<body>
    <h1>🎨 二维码插件图标生成器</h1>
    
    <div class="instructions">
        <h3>使用说明：</h3>
        <ol>
            <li>点击下方的"下载"按钮，将生成对应尺寸的PNG图标</li>
            <li>将下载的图标文件重命名为对应的文件名</li>
            <li>放置到插件目录的 <code>icons</code> 文件夹中</li>
        </ol>
    </div>

    <div class="icon-container">
        <div class="icon-item">
            <h4>16x16</h4>
            <canvas id="icon16" width="16" height="16"></canvas>
            <br>
            <button onclick="downloadIcon('icon16', 'icon16.png')">下载 icon16.png</button>
        </div>

        <div class="icon-item">
            <h4>32x32</h4>
            <canvas id="icon32" width="32" height="32"></canvas>
            <br>
            <button onclick="downloadIcon('icon32', 'icon32.png')">下载 icon32.png</button>
        </div>

        <div class="icon-item">
            <h4>48x48</h4>
            <canvas id="icon48" width="48" height="48"></canvas>
            <br>
            <button onclick="downloadIcon('icon48', 'icon48.png')">下载 icon48.png</button>
        </div>

        <div class="icon-item">
            <h4>128x128</h4>
            <canvas id="icon128" width="128" height="128"></canvas>
            <br>
            <button onclick="downloadIcon('icon128', 'icon128.png')">下载 icon128.png</button>
        </div>
    </div>

    <script>
        // 绘制二维码图标
        function drawQRIcon(canvas) {
            const ctx = canvas.getContext('2d');
            const size = canvas.width;
            const moduleSize = Math.floor(size / 8);
            const margin = Math.floor(moduleSize * 0.5);
            
            // 清空画布
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(0, 0, size, size);
            
            // 设置前景色
            ctx.fillStyle = '#007bff';
            
            // 简化的二维码图案
            const pattern = [
                [1,1,1,0,0,1,1,1],
                [1,0,1,0,0,1,0,1],
                [1,1,1,0,0,1,1,1],
                [0,0,0,1,1,0,0,0],
                [0,1,0,1,1,0,1,0],
                [1,1,1,0,0,1,1,1],
                [1,0,1,0,0,1,0,1],
                [1,1,1,1,1,1,1,1]
            ];
            
            // 绘制图案
            for (let y = 0; y < 8; y++) {
                for (let x = 0; x < 8; x++) {
                    if (pattern[y][x]) {
                        ctx.fillRect(
                            margin + x * moduleSize,
                            margin + y * moduleSize,
                            moduleSize,
                            moduleSize
                        );
                    }
                }
            }
            
            // 添加圆角效果（对于较大的图标）
            if (size >= 48) {
                ctx.globalCompositeOperation = 'destination-in';
                ctx.beginPath();
                // 使用兼容性更好的圆角矩形绘制方法
                const radius = size * 0.15;
                ctx.moveTo(radius, 0);
                ctx.lineTo(size - radius, 0);
                ctx.quadraticCurveTo(size, 0, size, radius);
                ctx.lineTo(size, size - radius);
                ctx.quadraticCurveTo(size, size, size - radius, size);
                ctx.lineTo(radius, size);
                ctx.quadraticCurveTo(0, size, 0, size - radius);
                ctx.lineTo(0, radius);
                ctx.quadraticCurveTo(0, 0, radius, 0);
                ctx.closePath();
                ctx.fill();
                ctx.globalCompositeOperation = 'source-over';
            }
        }
        
        // 下载图标
        function downloadIcon(canvasId, filename) {
            const canvas = document.getElementById(canvasId);
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL('image/png');
            link.click();
        }
        
        // 初始化所有图标
        function initIcons() {
            ['icon16', 'icon32', 'icon48', 'icon128'].forEach(id => {
                const canvas = document.getElementById(id);
                drawQRIcon(canvas);
            });
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', initIcons);
    </script>
</body>
</html> 